<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
	<SCRIPT LANGUAGE="javascript" SRC="scripts/ajax-utils.js"></SCRIPT>
	<SCRIPT LANGUAGE="javascript" SRC="scripts/ajax-calls.js"></SCRIPT>
	<div style="width: 1000px; height: 50px; text-align: right;">
		Welcome <b>${user.userName}</b>, <a href="logout">Logout</a>
	</div>
	<script type="text/javascript">
		setInterval(updateNumOfOnline, 10000);
	</script>
	<div style="width: 1000px">
		<div style="float: left; width: 200px; text-align: left;">
			<div>
				<fieldset style="height: 200px; background: #EFEDFC">
					<legend style="color: graytext; font-weight: bold;">Common
						Information</legend>
					<p style="font-size: 14">Capacity: ${percent}%  in use</p>
					<p style="font-size: 14">
					<div id="numOfOnline">Currently online: ${numOfOnline }</div>
					</p>

				</fieldset>
			</div>
			<div>
				<fieldset style="height: 200px; background: #EFEDFC">
					<legend style="color: graytext; font-weight: bold;">User
						Profiles</legend>
					<p style="font-size: 14">${user.firstName}${user.lastName}</p>
					<p style="font-size: 14">${user.cellphone}</p>
					<p style="font-size: 14">${user.emailAddress}</p>
					<br />
					<p style="font-size: 14; text-align: right">
						<a href="edit-profile">Edit Profiles</a>
					</p>
				</fieldset>
			</div>
		</div>
		<div style="float: left; width: 800px;">
			<fieldset style="min-height: 500px;">
				<legend style="color: graytext; font-weight: bold;">User
					Profiles Editor</legend>
				<br />
				<div align="center">
					
					<div id="error" align="center" style="color:red;">
						<ul>
							<c:forEach items="${listError}" var="x">
								<li>${x}</li>
							</c:forEach>

						</ul>
					</div>
					<form action="submit_edit" method="post">
						<table>
							<tr>
								<td>First Name:</td>
								<td><input type="text" name="firstName"
									value="${user.firstName }" size="20px" /><span
									style="color: red;">*</span></td>
							</tr>
							<tr>
								<td>Last Name:</td>
								<td><input type="text" name="lastName"
									value="${user.lastName }" size="20px" /><span
									style="color: red;">*</span></td>
							</tr>
							<tr>
								<td>Username:</td>
								<td><input type="text" name="userName"
									value="${user.userName }" size="20px" /><span
									style="color: red;">*</span></td>
							</tr>
							<tr>
								<td>Email Address:</td>
								<td><input type="text" name="email"
									value="${user.emailAddress }" size="40px" /><span
									style="color: red;">*</span></td>
							</tr>
							<tr>
								<td>Password:</td>
								<td><input readonly type="text" name="oldPassword"
									value="${user.password }" size="30px" /><span
									style="color: red;">*</span></td>
							</tr>
							<tr>
								<td>New Password:</td>
								<td><input name="newPassword" type="text" value=""
									size="30px" /></td>
							</tr>
							<tr>
								<td>Conf. New Password:</td>
								<td><input name="confirmPassword" type="text" value=""
									size="30px" /></td>
							</tr>

							<tr>
								<td>Cellphone:</td>
								<td><input name="cellPhone" type="text"
									value="${user.cellphone }" size="30px" /></td>
							</tr>
							<tr align="center">
								<td colspan="2"><br /> <br /> <input type="submit"
									value="Accept Changes" /><input type="reset" value="Cancel" onclick="window.location.href ='pages/file_management.jsp'"/><br /></td>
							</tr>
						</table>
					</form>
				</div>
			</fieldset>
		</div>

	</div>
</body>
</html>